<template>
  <div  class="auto select-overspread" style="padding-left: 10px;">
    <ul class="nav nav-tabs" >
      <li role="presentation" class="active" v-if ='isConfirm'><a href="#">新增气表品牌</a></li>
        <li role="presentation" class="active" v-if ='isModify'><a href="#">修改气表品牌</a></li>
    </ul>
    <form class="form-horizontal user-meter-padding" style="flex: 1;" id="comprehen-gasBra-addGasBra-新增气表品牌">
       <div class="row auto" >

         <div class="form-group form-input-group col-sm-4">
           <label for="f_meter_brand"  class="col-sm-2 control-label">气表品牌:</label>
           <div class="col-sm-2"  >
             <input class="form-control"  type="text" v-model="gasmessage.f_meter_brand"  required="required">
           </div>
         </div>

         <!-- <div class="form-group form-input-group col-sm-4">
         </div> -->

         <div class="form-group form-input-group col-sm-4">
           <label for="f_meter_type" class="col-sm-2 control-label">气表类型:</label>
           <div class="col-sm-2">
              <v-select :value.sync="gasmessage.f_meter_type"
                 v-model="gasmessage.f_meter_type"
                 :options='meterType' placeholder='气表类型'
                 v-model="gasmessage.f_meter_type"
                 close-on-select></v-select>
           </div>
         </div>

         <div class="form-group form-input-group col-sm-4">
           <label for="f_manufacturers" class="col-sm-2 control-label">气表厂家:</label>
           <div class="col-sm-2">
             <input class="form-control"  type="text" v-model="gasmessage.f_manufacturers"  required="required">
           </div>
         </div>


       </div>
     <div class="row auto" style="margin-top:10px;margin-left: 0px; margin-right: 0px;" >

       <div class="form-group form-input-group col-sm-4">
         <label for="f_meter_limit" class="col-sm-2 control-label">气表年限:</label>
         <div class="col-sm-2" >
           <input class="form-control"  type="number" v-model="gasmessage.f_meter_limit"  required="required" id="comprehen-gasBra-addGasBra-气表年限">
         </div>
       </div>

       <div class="form-group form-input-group col-sm-4">
         <label for="f_topup_ceil" class="col-sm-2 control-label ">充值上限:</label>
         <div class="col-sm-2">
           <input class="form-control"  type="number" v-model="gasmessage.f_topup_ceil"  >
         </div>
       </div>

       <div class="form-group form-input-group col-sm-4">
         <label for="f_police_gas" class="col-sm-2 control-label">报警气量:</label>
         <div class="col-sm-2">
           <input class="form-control"  type="number" v-model="gasmessage.f_police_gas"  >
         </div>
       </div>
    </div>
    <div class="row auto" style="margin-top:10px;margin-left: 0px; margin-right: 0px;">

      <div class="form-group form-input-group col-sm-4">
        <label for="f_alias" class="col-sm-2 control-label">别名:</label>
        <div class="col-sm-2" >
          <input class="form-control"  type="text" v-model="gasmessage.f_alias"  id="comprehen-gasBra-addGasBra-别名">
        </div>
      </div>
      <div class="form-group form-input-group col-sm-4">
        <label for="f_overdr_lines" class="col-sm-2 control-label">透支额度:</label>
        <div class="col-sm-2">
          <input class="form-control"  type="number" v-model="gasmessage.f_overdr_lines"  >
        </div>
      </div>
      <div class="form-group form-input-group col-sm-4">
        <label for="f_checkout_limit" class="col-sm-2 control-label">校检年限:</label>
        <div class="col-sm-2" >
          <input class="form-control"  type="number" v-model="gasmessage.f_checkout_limit" id="comprehen-gasBra-addGasBra-校检年限">
        </div>
      </div>

    </div>
    <div class="row auto" style="margin-top:10px;margin-left: 0px; margin-right: 0px;">

      <div class="form-group form-input-group col-sm-4" v-if="gasmessage.f_meter_type[0].includes('卡表')">
        <label for="f_card_password"  class="col-sm-2 control-label" v-if="gasmessage.f_meter_type[0] !=='机表'">卡密码:</label>
        <div class="col-sm-2">
          <input class="form-control"  type="text" v-model="gasmessage.f_card_password"  >
        </div>
      </div>
      <div v-if="gasmessage.f_meter_type[0].includes('卡表')">
        <div class="form-group form-input-group col-sm-4">
          <label for="f_isdecimal" class="col-sm-2 control-label">支持小数:</label>
          <div class="col-sm-2" >
            <v-select :value.sync="gasmessage.f_isdecimal"
               v-model="gasmessage.f_isdecimal"
               :options='isdecimal' placeholder='是否支持小数'
               v-model="gasmessage.f_isdecimal"
               close-on-select></v-select>
          </div>
        </div>
        <div class="form-group form-input-group col-sm-4">
          <label for="f_isdecimal" class="col-sm-2 control-label">支付方式:</label>
          <div class="col-sm-2" >
            <v-select :value.sync="gasmessage.f_collection_type"
               v-model="gasmessage.f_collection_type"
               :options='collectiontypes' placeholder='支付方式'
               v-model="gasmessage.f_collection_type"
               close-on-select :disabled='colletype'></v-select>
          </div>
        </div>
      </div>
    </div>
    <p class="bg-info text-center" style="padding: 8px;">气表型号</p>
    <div style="flex: 1" class="span">
      <add-gas-model-info v-on:toggle = "getArrParam" :data = "gasmessage" v-ref:addgasmodel> </add-gas-model-info>
    </div>
    <div style="text-align:right;height:auto;margin-top:30px;margin-right:50px;">
      <button class="btn btn-success " @click="confirm()" v-if ='isConfirm' style="width:80px;margin-left:20px;"  id="comprehen-gasBra-addGasBra-保存">保&nbsp;&nbsp;&nbsp;存</button>
      <button class="btn btn-success " @click="modify()" v-if ='isModify'  style="width:80px;margin-left:20px;" id="comprehen-gasBra-addGasBra-修改">修&nbsp;&nbsp;&nbsp;改</button>
      <button class="btn btn-default " @click="cancel()" style="width:80px;margin-left:20px;" id="comprehen-gasBra-addGasBra-取消">取&nbsp;&nbsp;&nbsp;消</button>
    </div>
  </form>
  </div>
</template>
<script>
import AppData from '../../../../stores/AppData'
/**
*阶梯气价管理组件
*/
export default {
  data () {
    return {
      model: {},
      addGasModelArray: [],
      isConfirm: true,
      isModify: false,
      gasmessage: {
        id: '',
        f_meter_type: '',
        f_isdecimal: '否'
      },
      colletype: false,
      isdecimal: [{label: '是', value: '是'}, {label: '否', value: '否'}],
      collectiontypes: [{label: '按金额', value: '按金额'}, {label: '按气量', value: '按气量'}]
    }
  },
  props: ['data'],
  watch: {
    'data' (val) {
      this.judgeInitValue(val)
    },
    'gasmessage.f_meter_type' (val) {
      if (this.gasmessage.f_meter_type[0] === '金额卡表') {
        this.gasmessage.f_collection_type = ['按金额']
        this.colletype = true
      } else {
        this.colletype = false
      }
    }
  },
  ready () {
    this.judgeInitValue(this.data)
  },
  methods: {
    getArrParam () {
      this.addGasModelArray = this.$refs.addgasmodel.addGasModelArr
      for (var i = 0; i < this.addGasModelArray.length; i++) {
        this.addGasModelArray[i].f_size_card = this.addGasModelArray[i].cardsize[0]
        this.addGasModelArray[i].f_type = this.addGasModelArray[i].type[0]
      }
    },
    judgeInitValue (val) {
      if (!this.isEmpty(val)) {
        this.gasmessage = Object.assign({}, this.gasmessage, val)
        this.gasmessage.f_meter_type = [this.gasmessage.f_meter_type]
        this.gasmessage.f_isdecimal = this.gasmessage.f_isdecimal ? [this.gasmessage.f_isdecimal] : ['否']
        this.gasmessage.f_collection_type = this.gasmessage.f_collection_type ? [this.gasmessage.f_collection_type] : ''
        this.isConfirm = false
        this.isModify = true
      } else {
        this.initgasmessage()
        this.isConfirm = true
        this.isModify = false
      }
    },
    confirm () {
      this.model = Object.assign({}, this.gasmessage)
      this.model.f_meter_type = this.model.f_meter_type[0]
      this.model.f_isdecimal = this.model.f_isdecimal[0]
      this.model.f_collection_type = this.model.f_collection_type[0]
      this.getArrParam()
      this.$LogicService.addGasBrand(this.model, this.addGasModelArray)
      .then(
        (res) => {
          this.$dispatch('success', '气表品牌增加', this.data, res)
        }
      ).catch(
        (error) => {
          this.$dispatch('error', '气表品牌增加', this.data, error)
        }
      )
      this.data = {}
    },
    transfer () {
      this.model.f_isdecimal = this.model.f_isdecimal[0]
      this.model.f_collection_type = this.model.f_collection_type[0]
      this.$LogicService.modifyGasBrand(this.model, this.addGasModelArray)
      .then(
        (res) => {
          this.$dispatch('success', '气表品牌修改', this.data, res)
        }
      ).catch(
        (error) => {
          this.$dispatch('error', '气表品牌修改', this.data, error)
        }
      )
    },
    cancel () {
      this.$dispatch('close')
    },
    modify () {
      this.model = Object.assign({}, this.gasmessage)
      this.model.f_meter_type = this.model.f_meter_type[0]
      this.getArrParam()
      this.transfer()
      this.data = {}
    },
    initgasmessage () {
      this.gasmessage = {
        f_meter_type: [],
        f_isdecimal: '否',
        f_collection_type: []
      }
    },
    isEmpty (value) {
      for (let name in value) {
        return false
      }
      return true
    }
  },
  computed: {
    meterType () {
      return AppData.getParam('气表类型')
    }
  }
}
</script>
